<template>
<transition
  @enter="enter"
  @leave="leave"
  >
<div class="list-player" v-show="this.isShowListPlayer">
    <div class="warpper">
      <div class="player-top">
        <div class="top-left">
          <div class="mode loop" @click="mode" ref="mode"></div>
          <p v-if="this.modeType === 0">顺序播放</p>
          <p v-else-if="this.modeType === 1">单曲循环</p>
          <p v-else-if ="this.modeType === 2">随机播放</p>
        </div>
        <div class="top-right">
          <div class="del" @click="delAll()"></div>
        </div>
      </div>
      <div class="player-middle">
        <ScrollView ref="scrollView">
          <ul ref="play">
             <li class="item" v-for="(value,index) in songs" :key="value.id" @click="selectMusic(index)">
              <div class="item-left">
                <!-- currentIndex === index 当前播放歌曲添加播放?暂停图标  -->
                <div class="item-play" @click.stop="play" v-show="currentIndex === index"></div>
                <p>{{value.name}}</p>
              </div>
              <div class="item-right">
                <div class="item-favorite" @click.stop="favorite(value)" :class="{'active':isFavorite(value)}"></div>
                <div class="item-del" @click.stop="del(index)"></div>
              </div>
            </li>
            
          </ul>
        </ScrollView>
      </div>
      <div class="player-bottom">
        <p @click.stop="hidden">关闭</p>
      </div>
    </div>
  </div>
</transition>
  
</template>

<script>
import ScrollView from '../ScrollView';
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
import {mapActions,mapGetters} from 'vuex';
import modeType from '../../store/modeType'

export default {
  name:"ListPlayer",
  components:{
    ScrollView
  },
  data(){
    return{
      isShow:false,
    }
  },
  methods:{
    ...mapActions([
      'setIsPlaying',
      'setModeType',
      'setListPlayer',
      'setDelSong',
      'setCurrentIndex',
      'setFavoriteSong'
    ]),
    //播放模式
    mode(){
      if(this.modeType === modeType.loop){
        this.setModeType(modeType.one)
      }else if(this.modeType === modeType.one){
        this.setModeType(modeType.random)
      }else{
        this.setModeType(modeType.loop)
      }
    },
    play(){
      this.setIsPlaying(!this.isPlaying)
    },
    //关闭按钮
    hidden(){
      this.setListPlayer(false)
    },
    del(index){
      this.setDelSong(index)
    },
    delAll(){
      this.setDelSong()
    },
    //点击当前列表选择播放的音乐
    selectMusic(index){
      this.setCurrentIndex(index);
    },
    favorite(song){
      this.setFavoriteSong(song);
    },
    //验证该歌曲是否收藏 作用于收藏图标
    isFavorite(song){
      let result = this.favoriteList.find(function(currentValue){
        return currentValue.id === song.id;
      })
      return result != undefined;
    },
    enter(el,done){
      Velocity(el, 'transition.shrinkIn', { duration: 500 },function(){
        done()
      })
    }, 
    leave(el,done){
      Velocity(el, 'transition.shrinkOut', { duration: 500 },function(){
        done()
      })
    },
  },
  computed:{
    ...mapGetters([
      'isPlaying',
      'modeType',
      'isShowListPlayer',
      'songs',
      'currentIndex',
      'favoriteList']),
  },
  watch:{
    //播放?暂停按钮
    isPlaying(newValue,oldValue){
      if(newValue){
        this.$refs.play.classList.add('active')
      }else{
        this.$refs.play.classList.remove('active')
      }
    },
    //切换播放模式
    modeType(newValue,oldValue){
      if(newValue === 0){
        this.$refs.mode.classList.add('loop')
        this.$refs.mode.classList.remove('random')
      }else if(newValue === 1){
        this.$refs.mode.classList.add('one')
         this.$refs.mode.classList.remove('loop')
      }else{
        this.$refs.mode.classList.add('random')
         this.$refs.mode.classList.remove('one')
      }
    },
    //打开播放列表时重新计算高度 - scrollView生效
    isShowListPlayer (newValue, oldValue) {
      if (newValue) {
        this.$refs.scrollView.refresh()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import"../../assets/css/mixin";
@import"../../assets/css/variable";
.list-player{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  @include bg_sub_color();
  .warpper{
    .player-top{
      width: 100%;
      height:100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-left{
        display: flex;
        align-items: center;
        padding-left: 20px;
        .mode{
          width: 56px;
          height: 56px;
          margin-right: 20px;
          &.loop{
            @include bg_img('../../assets/images/small_loop');
          }
          &.one{
            @include bg_img('../../assets/images/small_one');
          }
          &.random{
            @include bg_img('../../assets/images/small_shuffle');
          } 
        }
        p{
          @include font_color();
          @include font_size($font_medium_s)
        }
      }
      .top-right{
        .del{
          width: 84px;
          height: 84px;
          @include bg_img('../../assets/images/small_del')
        }
      }
    }
    .player-middle{
      height: 700px;
      overflow: hidden;
      width: 100%;
      ul{
        &.active{
          .item{
            .item-play{
              @include bg_img('../../assets/images/small_pause');
            }
          }
        }
      }
      .item{
        height: 100px;
        padding: 0 20px;
        border-top: 1px solid #ccc;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;  
        .item-left{
          display: flex;
          align-items: center;
          .item-play{
            width: 56px;
            height: 56px;
            margin-right: 20px;
            @include bg_img('../../assets/images/small_play');
          }
          p{
            @include font_size($font_medium_s);
            @include font_color();
            @include no-wrap();
          }
        }
        .item-right{
          display: flex;
          align-items: center;  
          .item-favorite{
            width: 56px;
            height: 56px;
            @include bg_img('../../assets/images/small_un_favorite');
            &.active{
              @include bg_img('../../assets/images/small_favorite');
            }
          }
          .item-del{
            width: 52px;
            height: 52px;
            margin-left: 20px;
            @include bg_img('../../assets/images/small_close')
          }
        }
      }
    }
    .player-bottom{
      width: 100%;
      height: 100px;
      text-align: center;
      line-height: 100px;
      @include bg_color();
      p{
        @include font_size($font_medium);
        color: #fff;
      }
    }
  }
}
</style>